<!-- 设备管理--基础设置-设备型号页面 -->
<template>
  <div class="equip-wrap-common">
    <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
      <px-row :gutter="16">
        <px-col :span="5">
          <px-form-item label="设备型号">
            <px-input
              v-model="queryParams.name"
              placeholder="请输入设备型号"
              maxlength="50"
              clearable
              @blur="queryParams.name = $event.target.value.trim()"
              @keyup.enter="queryTable"
            >
              <template #suffix>
                <px-icon style="cursor: pointer" @click="queryTable">
                  <search />
                </px-icon>
              </template>
            </px-input>
          </px-form-item>
        </px-col>
        <px-col :span="5">
          <px-form-item label="设备总称">
            <px-select-v2
              v-model="queryParams.categoryId"
              filterable
              clearable
              :options="categoryIdList"
              placeholder="请选择设备总称"
              @change="handleCategoryChange"
            />
          </px-form-item>
        </px-col>
        <px-col :span="5">
          <px-form-item label="设备类型">
            <px-select-v2
              v-model="queryParams.typeId"
              filterable
              clearable
              :options="typeIdList"
              placeholder="请选择设备类型"
              @focus="handleTypeFocus"
            />
          </px-form-item>
        </px-col>
        <px-col :span="5">
          <px-button type="primary" @click="queryTable">查询</px-button>
          <px-button @click="resetTable">重置</px-button>
        </px-col>
      </px-row>
    </px-form>
    <div class="equip-table-btn">
      <px-button v-has="'ALL_EQUIP_ARCHIVE_SETTING_MODEL_ADD'" type="primary" class="table-btn" @click="addEquip" style="margin-right: 8px"
        >新增设备型号</px-button
      >
      <px-button v-has="'ALL_EQUIP_ARCHIVE_SETTING_MODEL_DOWNLOAD'" style="margin-right: 8px" type="primary" plain @click="templateDownload"
        >下载模板</px-button
      >
      <BatchUpload
        url="/ifp/digitaltwins/api/v1/equipmentModel/importData"
        permission="ALL_EQUIP_ARCHIVE_SETTING_MODEL_UPLOAD"
        @updateUploadPage="queryTable"
      />
    </div>
    <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 341px)" border>
      <px-table-column label="序号" width="80" align="center" fixed="left">
        <template #default="{ $index }">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
        </template>
      </px-table-column>
      <px-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :fixed="item.fixed"
      >
        <template #default="scope">{{
          scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
        }}</template>
      </px-table-column>
      <px-table-column fixed="right" label="操作" width="150" align="center">
        <template #default="scope">
          <px-tooltip content="详情" placement="top">
            <px-button v-has="'ALL_EQUIP_ARCHIVE_SETTING_MODEL_VIEW'" link type="primary" icon="Tickets" @click="handleView(scope.row)" />
          </px-tooltip>
          <px-tooltip content="编辑" placement="top">
            <px-button v-has="'ALL_EQUIP_ARCHIVE_SETTING_MODEL_EDIT'" link type="primary" icon="EditPen" @click="handleEdit(scope.row)" />
          </px-tooltip>
          <px-tooltip content="删除" placement="top">
            <px-button v-has="'ALL_EQUIP_ARCHIVE_SETTING_MODEL_DELETE'" link type="danger" icon="Delete" @click="handleDelete(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      class="equip-table-pagination"
      :total="total"
      @pagination="queryTable"
    />
    <!-- 新增/修改抽屉 -->
    <AddEquipDrawer :visible="equipVisible" :drawerType="drawerType" :equipRow="equipRow" @queryTable="queryTable" @closeDrawer="closeDrawer" />
    <!-- 查看弹窗 -->
    <ViewEquipDialog :visible="viewEquipVisible" :rowData="rowData" @closeDialog="closeDialog" />
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "ALL_EQUIP_ARCHIVE_SETTING_MODEL"
});
import { deleteEquipModel, getEquipNameSelect, getEquipTypeSelect, queryEquipModel } from "@/api/equip/archive";
import { PxMessage, PxMessageBox } from "px-ui";
import { getCurrentInstance, onMounted, reactive, toRefs } from "vue";
import BatchUpload from "@/components/Upload/BatchUpload.vue";
import ViewEquipDialog from "../components/ViewEquipDialog.vue";
import AddEquipDrawer from "./components/AddEquipDrawer.vue";

const { proxy }: any = getCurrentInstance();
const state = reactive<any>({
  queryParams: {
    name: "",
    typeId: "",
    categoryId: "",
    pageNum: 1,
    pageSize: 20
  },
  tableColumns: [
    { prop: "name", label: "设备型号", minWidth: "120", showOverflowTooltip: true },
    { prop: "categoryName", label: "设备总称", minWidth: "120", showOverflowTooltip: true },
    { prop: "typeName", label: "设备类型", minWidth: "120", showOverflowTooltip: true },
    { prop: "createByName", label: "创建人", minWidth: "120", showOverflowTooltip: true },
    { prop: "createTime", label: "创建时间", minWidth: "120", showOverflowTooltip: true }
  ],
  tableData: [],
  total: 0,
  typeIdList: [],
  categoryIdList: [],
  equipVisible: false,
  drawerType: "add",
  equipRow: {},
  viewEquipVisible: false,
  rowData: []
});
const { queryParams, tableColumns, tableData, total, typeIdList, categoryIdList, equipVisible, drawerType, equipRow, viewEquipVisible, rowData } =
  toRefs(state);

// 进入页面时触发
onMounted(() => {
  queryTypeIdSelect();
  queryCategoryIdSelect();
  queryTable();
});

// 设备类型下拉框
const queryTypeIdSelect = async () => {
  typeIdList.value = [{ name: "全部", id: "" }];
  const data = await getEquipTypeSelect({ categoryId: queryParams.value.categoryId });
  typeIdList.value = typeIdList.value.concat(data).map(item => ({ label: item.name, value: item.id }));
};
// 设备总称下拉框
const queryCategoryIdSelect = async () => {
  categoryIdList.value = [{ name: "全部", id: "" }];
  const data = await getEquipNameSelect({});
  categoryIdList.value = categoryIdList.value.concat(data).map(item => ({ label: item.name, value: item.id }));
};
// 改变总称，清空类型
const handleCategoryChange = () => {
  queryParams.value.typeId = "";
};
// 如果有总称，根据它的值获取类型
const handleTypeFocus = () => {
  queryTypeIdSelect();
};
// 查询设备列表
const queryTable = async () => {
  const params = queryParams.value;
  const data = await queryEquipModel(params);
  tableData.value = data?.data || [];
  total.value = data?.total;
};
// 重置筛选条件和设备列表
const resetTable = async () => {
  queryParams.value = {
    name: "",
    typeId: "",
    categoryId: "",
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};
// 下载模版
const templateDownload = async () => {
  proxy.download("get", "/digitaltwins/api/v1/equipmentModel/templateDownLoad", {}, "设备型号模板.xlsx");
};
// 查看设备-显示弹窗
const handleView = (row: any) => {
  rowData.value = [
    { label: "设备型号", text: row.name },
    { label: "设备类型", text: row.typeName },
    { label: "备注", text: row.remark }
  ];
  viewEquipVisible.value = true;
};
// 查看设备-关闭弹窗
const closeDialog = () => {
  viewEquipVisible.value = false;
};
// 添加设备
const addEquip = () => {
  drawerType.value = "add";
  equipVisible.value = true;
};
// 编辑设备
const handleEdit = (row: any) => {
  equipRow.value = row;
  equipVisible.value = true;
  drawerType.value = "edit";
};
// 关闭抽屉
const closeDrawer = () => {
  equipVisible.value = false;
};
// 删除设备
const handleDelete = async (row: any) => {
  PxMessageBox.confirm(`要删除当前设备型号“${row.name}”吗？`, "提示", {
    confirmButtonText: "删除",
    confirmButtonClass: "px-button--danger",
    cancelButtonText: "取消",
    type: "warning",
    draggable: true
  })
    .then(async () => {
      await deleteEquipModel({ id: row.id });
      PxMessage.success("删除成功");
      queryTable();
    })
    .catch(() => {});
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");

.equip-wrap-common {
  height: calc(100vh - 177px);
  .equip-form {
    padding-top: 12px;
  }
}
</style>
